<template>
	<div style="display: flex;flex-direction: column;" class="otherPage productsAndServices scientificResearch">
		<Header :selected="5"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="3" :bgColor="bgColor">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<div class="swiper-container-wap" style="margin: auto; margin-bottom: 50px; position: relative;">
					<div class="swiper-container" ref="scientificSwiper" id="scientificSwiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(slide, index) in ScienceDevelopCover" :key="index">
								<div class="slide-content">
									<img :src="$request.getImgUrl()+slide.fileUrl" alt="Slide"
										class="swiper-lazy animation" />
								</div>
							</div>
						</div>
					</div>
				</div>

				<div style="position: relative;    margin-left: -3px;   margin-right: -3px;">
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
				</div>

				<el-row :gutter="6">
					<el-col :span="24" class="newArea" v-for="(news, index) in newsList" :key="index">
						<div @click="goToDetail(news.id)" class="news-list">
							<el-row :gutter="6" class="news-item" :class="{ 'hover': hoverIndex === index }"
								@mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1">
								<el-col :xs="5" :sm="3" :md="3" :lg="3" class="date">
									<div>
										<div class="day"> {{ formatDate(news.months, 'MM') }}</div>
										<div class="month-year">{{ formatDate(news.months, 'yyyy') }}</div>
									</div>
								</el-col>
								<el-col :xs="15" :sm="18" :md="18" :lg="18" class="newcontent">
									<div class="newcontentcontainer">
										<div class="title">{{ news.titles }}</div>
										<div class="description" v-html="$request.formartContent(news.content)">
										</div>

									</div>
								</el-col>
								<el-col :xs="4" :sm="3" :md="3" :lg="3" class="newcontentMoreArea">
									<div class="moreInfoBtn" @click="goToDetail(news.id)">{{$t("moreDetails")}} <i
											class="el-icon-d-arrow-right"></i>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>

				<el-row :gutter="24" type="flex" class="paginationArea">
				
					<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
						:layout="isShowJumper?'prev, pager, next,total,jumper ':'prev, next,total' "  :total="total"
						:prev-text="$t('previousPage')" :next-text="$t('nextPage')"
						@current-change="handleCurrentChange" />
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		productsAndServicesMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 10,
				total: 0,
				currentPage: 1,
				menus: productsAndServicesMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('productsAndServices'),
						to: '/productsAndServices'
					},
					{
						//科技研发
						label: this.$t('scientificResearch'),
						to: '/scientificResearch'
					}
				],
				hoverIndex: -1,
				newsList: [
					// 添加更多新闻...
				],
				//轮播图集合
				ScienceDevelopCover: [],
				isShowJumper: true

			};
		},
		computed: {},
		created() {},
		mounted() {
			if (window.innerWidth < 768) {
				this.isShowJumper = false;
			} else {
				this.isShowJumper = true;
			}
			this.bindBg();
			this.getScienceDevelopCover();
			this.bindList().then(data => {
				this.initBannerSwiper();
			});

			this.bindList();
			window.addEventListener('resize', this.handleWindowResize);
		},
		destroyed() {
			window.removeEventListener('resize', this.handleWindowResize);
		},
		methods: {
			handleWindowResize() {
				if (window.innerWidth < 768) {
					this.isShowJumper = false;
				} else {
					this.isShowJumper = true;
				}
			},
			formatDate(date, format) {
				const dateObj = new Date(date);
				const year = dateObj.getFullYear();
				const month = String(dateObj.getMonth() + 1).padStart(2, '0');
				const day = String(dateObj.getDate()).padStart(2, '0');

				// 根据传入的格式进行处理
				if (format === 'yyyy-MM') {
					return `${year}-${month}`;
				} else if (format === 'DD') {
					return day;
				} else if (format === 'yyyy') {
					return `${year}`;
				} else if (format === 'MM') {
					return `${month}`;
				}
				return date;
			},
			/**
			 * 获取企业新闻顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getScienceDevelopTopImage(params).then(res => {
					this.bg_img = this.$request.getImgUrl() + res.data.fileUrl
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},
			getScienceDevelopCover() {
				let params = {};
				let that = this;
				that.$request.getScienceDevelopCover(params).then(res => {
					this.ScienceDevelopCover = res.data;
				}).catch((error) => {
					console.log(error);
				});
			},
			/**
			 * 获取企业新闻列表
			 */
			bindList() {
				return new Promise((resolve, reject) => {
					let params = {
						"pageNum": this.currentPage,
						"pageSize": this.pageSize
					};
					let that = this;
					that.$request.getScienceDevelopPage(params).then(res => {
						this.newsList = res.data.records;
						this.pageSize = res.data.size;
						this.total = res.data.total;
						this.currentPage = res.data.current;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				})
			},

			initBannerSwiper() {
				let that = this;
				that.swiper = new Swiper(that.$refs.scientificSwiper, {
					direction: 'horizontal',
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 0,
					effect: 'slide',
					lazy: {
						loadPrevNext: true,
					},
					// pagination: {
					// 	el: that.$refs.enterprisesNewsSwiperPagination,
					// 	clickable: true,
					// },
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					autoplay: {
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},
				});
				that.swiper.on('slideNextTransitionStart', function() {
					var activeIndex = that.swiper.activeIndex;
					//console.log("开始切换" + activeIndex);
				});
			},
			//获取点击页码，请求接口
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				this.bindList();
			},
			//////跳转详情页面
			goToDetail(id) {
				this.$router.push({
					name: this.$t("scientificResearchInfo"),
					query: {
						id: id,
					}
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/productsAndServices/productsAndServices.css");

	.scientificResearch .newArea {
		height: auto;
	}

	.scientificResearch .paginationArea {
		height: 70px;
		line-height: 70px;
		justify-content: center;
		padding-top: 20px;
	}

	.scientificResearch .moreInfoBtn {
		width: 97px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #EB7F20;
		border-radius: 4px;
		text-align: center;
		color: #EB7F20;
		/* margin-top: 2vh;
		margin-left: 10px; */

	}

	.scientificResearch .moreInfoBtn:hover {
		background-color: #EB7F20;
		color: #FFF;
	}

	.scientificResearch .news-list .news-item {
		height: 130px;



	}

	.newcontentMoreArea {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #F6F6F6;


	}

	.scientificResearch .news-list .news-item .title {
		font-size: 24px;

		font-weight: 530;
		align-items: center;
		/* 	margin-bottom: 1vh; */
		padding: 0px 10px;
	}

	.scientificResearch .news-list .news-item .description {

		font-size: 14px;
	}

	.scientificResearch .news-list .news-item:hover .title {
		color: #0484D7;
	}

	.scientificResearch .news-list .day {
		text-align: center;
		font-size: 2.6em;
		padding-top: 0vh;

	}

	.scientificResearch .news-list .month-year {
		text-align: center;
		font-size: 1.5em;
	}

	.scientificResearch .btn-next span {
		min-width: 50px !important;
	}

	.el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px !important;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.scientificResearch .news-item {
		margin-bottom: 20px;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.scientificResearch .news-item:hover .date {
		background-color: #0484D7;
		opacity: 0.8;
		color: #FFF;
	}

	.scientificResearch .news-item:hover {
		transform: scale(0.98)
	}

	::v-deep .el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}



	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.swiper-container-wap {
			width: calc(1px*(2560/ 1920)*857);
			height: calc(1px*(2560/ 1920)*445);
		}

		.productsAndServices .swiper-container {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .slide-content {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide img {
			width: 100%;
			height: 100%
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(2560/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}

		.newcontentMoreArea {
			height: calc(1px*(2560/ 1920)*116);
		}

		.scientificResearch .news-list .date {
			height: calc(1px*(2560/ 1920)*116);
		}

		.scientificResearch .news-list .day {
			padding-top: 0px;
			height: calc(1px*(2560/ 1920)*65);
			line-height: calc(1px*(2560/ 1920)*65);
		}

		.scientificResearch .news-list .title {
			height: calc(1px*(2560/ 1920)*51);
			line-height: calc(1px*(2560/ 1920)*51);
		}

		.scientificResearch .news-list .description {
			height: calc(1px*(2560/ 1920)*51);
			line-height: calc(1px*(2560/ 1920)*51/2);
		}

		.scientificResearch .newArea {
			height: calc(1px*(2560/ 1920)*146);
		}

		.scientificResearch .news-list .news-item {
			height: calc(1px*(2560/ 1920)*146);
		}

		.scientificResearch .news-list .newcontent {
			height: calc(1px*(2560/ 1920)*116);
		}

		.scientificResearch .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.swiper-container-wap {
			width: calc(1px*(2560/ 1920)*857);
			height: calc(1px*(2560/ 1920)*445);
		}

		.productsAndServices .swiper-container {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .slide-content {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide img {
			width: 100%;
			height: 100%
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(2560/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}


		.newcontentMoreArea {
			height: calc(1px*(2560/ 1920)*116);
		}

		.scientificResearch .news-list .date {
			height: calc(1px*(2560/ 1920)*116);
		}

		.scientificResearch .news-list .day {
			padding-top: 0px;
			height: calc(1px*(2560/ 1920)*65);
			line-height: calc(1px*(2560/ 1920)*65);
		}

		.scientificResearch .news-list .title {
			height: calc(1px*(2560/ 1920)*51);
			line-height: calc(1px*(2560/ 1920)*51);
		}

		.scientificResearch .news-list .description {
			height: calc(1px*(2560/ 1920)*51);
			line-height: calc(1px*(2560/ 1920)*51/2);
		}

		.scientificResearch .newArea {
			height: calc(1px*(2560/ 1920)*146);
		}

		.scientificResearch .news-list .news-item {
			height: calc(1px*(2560/ 1920)*146);
		}

		.scientificResearch .news-list .newcontent {
			height: calc(1px*(2560/ 1920)*116);
		}

		.scientificResearch .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.swiper-container-wap {
			width: calc(1px*(2320/ 1920)*857);
			height: calc(1px*(2320/ 1920)*445);
		}

		.productsAndServices .swiper-container {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .slide-content {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide img {
			width: 100%;
			height: 100%
		}


		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(2320/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}


		.newcontentMoreArea {
			height: calc(1px*(2320/ 1920)*116);
		}

		.scientificResearch .news-list .date {
			height: calc(1px*(2320/ 1920)*116);
		}

		.scientificResearch .news-list .day {
			padding-top: 0px;
			height: calc(1px*(2320/ 1920)*65);
			line-height: calc(1px*(2320/ 1920)*65);
		}

		.scientificResearch .news-list .title {
			height: calc(1px*(2320/ 1920)*51);
			line-height: calc(1px*(2320/ 1920)*51);
		}

		.scientificResearch .news-list .description {
			height: calc(1px*(2320/ 1920)*51);
			line-height: calc(1px*(2320/ 1920)*51/2);
		}

		.scientificResearch .newArea {
			height: calc(1px*(2320/ 1920)*146);
		}

		.scientificResearch .news-list .news-item {
			height: calc(1px*(2320/ 1920)*146);
		}

		.scientificResearch .news-list .newcontent {
			height: calc(1px*(2320/ 1920)*116);
		}

		.scientificResearch .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.swiper-container-wap {
			width: calc(1px*(2120/ 1920)*857);
			height: calc(1px*(2120/ 1920)*445);
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(2120/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}

		.productsAndServices .swiper-container {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .slide-content {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide img {
			width: 100%;
			height: 100%
		}

		.newcontentMoreArea {
			height: calc(1px*(2120/ 1920)*116);
		}

		.scientificResearch .news-list .date {
			height: calc(1px*(2120/ 1920)*116);
		}

		.scientificResearch .news-list .day {
			padding-top: 0px;
			height: calc(1px*(2120/ 1920)*65);
			line-height: calc(1px*(2120/ 1920)*65);
		}

		.scientificResearch .news-list .title {
			height: calc(1px*(2120/ 1920)*51);
			line-height: calc(1px*(2120/ 1920)*51);
		}

		.scientificResearch .news-list .description {
			height: calc(1px*(2120/ 1920)*51);
			line-height: calc(1px*(2120/ 1920)*51/2);
		}

		.scientificResearch .newArea {
			height: calc(1px*(2120/ 1920)*146);
		}

		.scientificResearch .news-list .news-item {
			height: calc(1px*(2120/ 1920)*146);
		}

		.scientificResearch .news-list .newcontent {
			height: calc(1px*(2120/ 1920)*116);
		}

		.scientificResearch .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.swiper-container-wap {
			width: 857px;
			height: 445px;
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(445 / 2 + 22 + 50));
			margin-top: 0px;
		}

		.productsAndServices .swiper-container {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .slide-content {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide img {
			width: 100%;
			height: 100%
		}



		.newcontentMoreArea {
			height: 116px;
		}

		.scientificResearch .news-list .date {
			height: 116px;
		}

		.scientificResearch .news-list .day {
			padding-top: 0px;
			height: 65px;
			line-height: 65px;
		}

		.scientificResearch .news-list .title {
			height: 51px;
			line-height: 51px;
		}

		.scientificResearch .news-list .description {
			height: 51px;
			line-height: 51px/2;
		}

		.scientificResearch .newArea {
			height: 146px;
		}

		.scientificResearch .news-list .news-item {
			height: 146px;
		}

		.scientificResearch .news-list .newcontent {
			height: 116px;
		}

		.scientificResearch .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}

		.swiper-container-wap {
			width: calc(1px*(1720/ 1920)*857);
			height: calc(1px*(1720/ 1920)*445);
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*((1720/ 1920)*445/2));
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(1720/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}

		.productsAndServices .swiper-container {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .slide-content {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide img {
			width: 100%;
			height: 100%
		}



		.newcontentMoreArea {
			height: calc(1px*(1720/ 1920)*116);
		}

		.scientificResearch .news-list .date {
			height: calc(1px*(1720/ 1920)*116);
		}

		.scientificResearch .news-list .day {
			padding-top: 0px;
			height: calc(1px*(1720/ 1920)*65);
			line-height: calc(1px*(1720/ 1920)*65);
		}

		.scientificResearch .news-list .title {
			height: calc(1px*(1720/ 1920)*51);
			line-height: calc(1px*(1720/ 1920)*51);
		}

		.scientificResearch .news-list .description {
			height: calc(1px*(1720/ 1920)*51);
			line-height: calc(1px*(1720/ 1920)*51/2);
		}

		.scientificResearch .newArea {
			height: calc(1px*(1720/ 1920)*146);
		}

		.scientificResearch .news-list .news-item {
			height: calc(1px*(1720/ 1920)*146);
		}

		.scientificResearch .news-list .newcontent {
			height: calc(1px*(1720/ 1920)*116);
		}

		.scientificResearch .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}


	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.productsAndServices .swiper-container-wap {
			width: calc(1px*(1520/ 1920)*857);
			height: calc(1px*(1520/ 1920)*445);
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(1520/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}

		.productsAndServices .swiper-container {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .slide-content {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide img {
			width: 100%;
			height: 100%
		}


		.newcontentMoreArea {
			height: calc(1px*(1520/ 1920)*116);
		}

		.scientificResearch .news-list .date {
			height: calc(1px*(1520/ 1920)*116);
		}

		.scientificResearch .news-list .day {
			padding-top: 0px;
			height: calc(1px*(1520/ 1920)*65);
			line-height: calc(1px*(1520/ 1920)*65);
		}

		.scientificResearch .news-list .title {
			height: calc(1px*(1520/ 1920)*51);
			line-height: calc(1px*(1520/ 1920)*51);
		}

		.scientificResearch .news-list .description {
			height: calc(1px*(1520/ 1920)*51);
			line-height: calc(1px*(1520/ 1920)*51/2);
		}

		.scientificResearch .newArea {
			height: calc(1px*(1520/ 1920)*146);
		}

		.scientificResearch .news-list .news-item {
			height: calc(1px*(1520/ 1920)*146);
		}

		.scientificResearch .news-list .newcontent {
			height: calc(1px*(1520/ 1920)*116);
		}

		.scientificResearch .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.productsAndServices .swiper-container-wap {
			width: calc(1px*(1366/ 1920)*857);
			height: calc(1px*(1366/ 1920)*445);
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(1366/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}

		.productsAndServices .swiper-container {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .slide-content {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide {
			width: 100%;
			height: 100%;
		}

		.productsAndServices .swiper-slide img {
			width: 100%;
			height: 100%
		}


		.newcontentMoreArea {
			height: calc(1px*(1366/ 1920)*116);
		}

		.scientificResearch .news-list .date {
			height: calc(1px*(1366/ 1920)*116);
		}

		.scientificResearch .news-list .day {
			padding-top: 0px;
			height: calc(1px*(1366/ 1920)*65);
			line-height: calc(1px*(1366/ 1920)*65);
		}

		.scientificResearch .news-list .title {
			height: calc(1px*(1366/ 1920)*51);
			line-height: calc(1px*(1366/ 1920)*51);
		}

		.scientificResearch .news-list .description {
			height: calc(1px*(1366/ 1920)*51);
			line-height: calc(1px*(1366/ 1920)*51/2);
		}

		.scientificResearch .newArea {
			height: calc(1px*(1366/ 1920)*146);
		}

		.scientificResearch .news-list .news-item {
			height: calc(1px*(1366/ 1920)*146);
		}

		.scientificResearch .news-list .newcontent {
			height: calc(1px*(1366/ 1920)*116);
		}

		.scientificResearch .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}

		.productsAndServices .swiper-container-wap {
			width: calc(1px*(1120/ 1920)*857);
			height: calc(1px*(1120/ 1920)*445);
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(1120/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}
	}

	@media (max-width: 1024px) {
		.productsAndServices .swiper-container-wap {
			width: calc(1px*(1024/ 1920)*857);
			height: calc(1px*(1024/ 1920)*445);
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(1024/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}
	}

	@media (max-width: 900px) {
		.productsAndServices .swiper-container-wap {
			width: calc(1px*(900/ 1920)*857);
			height: calc(1px*(900/ 1920)*445);
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(900/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}
	}



	@media (max-width:768px) {

		.productsAndServices .swiper-container-wap {
			width: calc(1px*(768/ 1920)*857);
			height: calc(1px*(768/ 1920)*445);
		}

		.scientificResearch .news-list .news-item {
			padding-right: 0px;
		}


		.scientificResearch .news-list .news-item .title {
			height: 30px;
			line-height: 30px;
			font-size: 16px;
		}

		.scientificResearch .news-list .news-item .description,
		.scientificResearch .news-list .description {
			height: 40px;
			line-height: 20px;
			font-size: 12px;
		}

		.scientificResearch .moreInfoBtn {
			font-size: 8px;
			width: 45px;
			height: 30px;
			line-height: 30px;
			padding: 0;
		}

		.scientificResearch .news-list .day {
			font-size: 30px;
		}

		.scientificResearch .news-list .month-year {
			font-size: 14px;
		}

		.scientificResearch .swiper-button-next {
			right: 15px !important;
		}

		.scientificResearch .swiper-button-prev {
			left: 15px !important;
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*(768/ 1920*445 / 2 + 22 + 50));
			margin-top: 0px;
		}


	}


	@media (max-width:440px) {

		.productsAndServices .swiper-container-wap {
			width: calc(1px*430*0.8);
			height: calc(1px*(430*445/857)*0.8);
		}

		.scientificResearch .swiper-button-prev,
		.scientificResearch .swiper-button-next {
			top: calc(-1px*((430*445/857) * 0.8 / 2 + 22 + 50));
			margin-top: 0px;
		}

		.scientificResearch .swiper-button-next {
			right: 15px !important;
		}

		.scientificResearch .swiper-button-prev {
			left: 15px !important;
		}

		.scientificResearch .news-list .month-year {
			font-size: 12px;
		}

		.scientificResearch .news-list .day {
			line-height: calc(1px*((1366/ 1920 * 65 + 10)))
		}

		.scientificResearch .news-list .news-item .description,
		.scientificResearch .news-list .description {
			height: 40px;
			line-height: 22px;
			font-size: 12px;
		}
	}
</style>